<script setup lang="ts">
  import { toRefs, computed } from 'vue';
  import { RouterLink, useRoute } from 'vue-router';

  interface NavListItemProps {
    name: string;
    icon?: string;
    id: string | number;
    path?: string;
    children?: Array<NavListItemProps>;
  }
  const props = withDefaults(defineProps<NavListItemProps>(), {
    path: '',
    children: () => [],
  });

  const route = useRoute();
  const { name, icon, path, children } = toRefs(props);

  const isActive = computed(() => {
    return (
      route.path === path.value ||
      children.value.some((item) => {
        return route.path === item.path;
      })
    );
  });
</script>

<template>
  <div class="c-nav-list-item block">
    <RouterLink
      :to="path"
      :class="{ 'item-active': isActive, 'cursor-default': !path }"
      class="flex px-[12px] text-[rgba(0,0,0,0.8)] font-[500] rounded-[4px] items-center h-[44px] mb-[2px] transition-colors duration-200"
    >
      <img v-if="icon" :src="icon" class="mr-[10px] w-[20px] h-[20px]" />
      <span v-else class="w-[24px]"></span>
      {{ name }}
    </RouterLink>
    <div class="topic_list">
      <RouterLink
        v-for="child of children"
        :key="child.id"
        :to="child.path || ''"
        class="topic"
        :class="{ 'item-active': isActive && route.path === child.path }"
        >{{ child.name }}</RouterLink
      >
    </div>
  </div>
</template>

<style scoped>
  .item-active {
    /* @apply ; */
    color: #5f70ff !important;
  }

  .c-nav-list-item:hover > a {
    color: #5f70ff !important;
  }

  .topic {
    display: block;
    cursor: pointer;
    font-size: 14px;
    line-height: 44px;
    color: #8a919f;
    padding-left: 38px;
    transition: color 0.3s;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }

  .topic:hover {
    color: #5f70ff !important;
    background: #eaf2ff !important;
  }

  .child-item-active {
    color: #5f70ff !important;
    background: #eaf2ff !important;
  }
</style>
